<template>
  <div class="infor">
    <van-nav-bar title="实名认证" left-arrow @click-left="onClickLeft" />
    <div class="shi_box1">
      <img src="./images/shi.png" alt="" class="" />
    </div>
    <div class="shi_box2">
      <input
        class="shi_box2_i"
        label="姓名"
        placeholder="请输入姓名"
        v-model="name2"
      />
      <input
        class="shi_box2_i"
        label="证件号码"
        maxlength="18"
        placeholder="请输入身份证号码"
        type="number"
        v-model="card"
      />
      <button class="shi_submit" @click="submit">实名认证</button>
    </div>
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip" />
  </div>
</template>
<script>
// JS
import AlertTip from "../../components/AlertTip/AlertTip";
import { reqShiM } from "../../api";
export default {
  data() {
    return {
      name2: "",
      card: "",
      alertText: "", // 提示文本
      alertShow: false, // 是否显示警告框
    };
  },
  components: {
    AlertTip,
  },
  methods: {
    async submit() {
      const { name2, card } = this;
      if (this.name2 === "") {
        this.showAlert("请输入姓名");
        return;
      } else if (this.card.length !== 18) {
        this.showAlert("身份证号错误，请重新输入！");
        return;
      } else if (this.validid.cnid(card) !== true) {
        this.showAlert("请输入正确身份证号");
        return;
      }
      let res = await reqShiM({ name2, card });
      if (res.code1 == 0) {
        this.showAlert(res.msg);
        // localStorage.setItem()
        console.log(res);
        localStorage.setItem("IdCard", res.data.card);
        localStorage.setItem("Idname", res.data.name2);
        this.$router.replace("/physical");
      } else {
        this.showAlert(res.msg);
      }
    },
    onClickLeft() {
      this.$router.replace("/profile");
    },
    showAlert(alertText) {
      this.alertShow = true;
      this.alertText = alertText;
    },
    closeTip() {
      this.alertShow = false;
      this.alertText = "";
    },
  },
};
</script>
<style>
.infor {
  height: 100%;
}
#shiming {
  font-size: 25px;
}
.shi_box1 {
  width: 100%;
  height: 180px;
  line-height: 100px;
  text-align: center;
}
.shi_box2 {
  height: 84%;
  width: 100%;
  margin-top: 5px;
}
.shi_box2_i {
  width: 94%;
  height: 50px;
  margin: 5% 3% 0;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-bottom: 1px solid #000;
  border-radius: 4px;
  background-color: transparent;
  font: 400 14px Arial;
  outline: none;
}
::-webkit-input-placeholder {
  /* Webkit browsers */
  color: #332020;
  font-size: 16px;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 8 */
  color: #332020;
  font-size: 16px;
}

::moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #332020;
  font-size: 16px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}
.shi_submit {
  display: block;
  width: 70%;
  height: 42px;
  position: relative;
  top: 5%;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  font-size: 16px;
  line-height: 42px;
  border: 0;
  margin-left: 40px;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
